<template>
  <!--新增编辑界面-->
  <el-dialog
    title="批量增加访视表"
    width="600px"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :modal-append-to-body="false"
    append-to-body
    :before-close="onClose"
  >
    <el-table
      ref="multipleTableabc"
      :data="DatabaseCrfList"
      tooltip-effect="dark"
      style="width: 100%"
      :size="size"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"> </el-table-column>
      <el-table-column type="index" label="序号" width="120"> </el-table-column>
      <el-table-column prop="surfaceName" label="名称" width="120"> </el-table-column>
      <el-table-column prop="surface" label="表ID" show-overflow-tooltip> </el-table-column>
      <el-table-column label="添加行数" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-select
            v-model="scope.row.number"
            placeholder="请选择"
            :size="size"
          >
            <el-option v-for="num of addNumOpts" :key="num" :label="num" :value="num"></el-option>
          </el-select>
        </template>
      </el-table-column>
    </el-table>
    <el-row style="width: 100%; text-align: right;">
      <el-button
        style="margin-top: 16px"
        :size="size"
        icon="fa fa-plus"
        type="primary"
        @click="addbatch"
        :loading="disabledSubmit"
      >批量增加</el-button>
      <el-button
        style="margin-top: 16px"
        :size="size"
        type="default"
        @click="onClose"
      >关闭</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import { mapActions } from 'vuex'

export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: () => false,
    },
    tableData: {
      type: Array,
      default: () => [],
    },
    DatabaseCrfList: {
      type: Array,
      default: () => [],
    },
    edcBuildProjectId: {
      type: String,
      default: () => '',
    },
    edcDataBaseId: {
      type: String,
      default: () => '',
    },
    dataBaseVersion: {
      type: String,
      default: () => '',
    },
    environment: {
      type: String,
      default: () => '',
    },
  },
  data() {
    return {
      multipleSelection: [],
      disabledSubmit: false,
      size: 'mini',
      addNumOpts: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
    }
  },

  watch: {
    editDialog(val) {
      if (val) {
      }
    },
  },

  methods: {
    ...mapActions('visitDesign', ['visitTableCreate', 'visitTableUpdate']),
    // 批量添加
    addbatch() {
      const list = []
      this.multipleSelection.map((mItem, mIndex) => {
        const obj = {
          databaseCrfId: mItem.id,
          tableName: mItem.surfaceName,
          tableCode: mItem.surface,
          lineNum: mItem.number
        }
        list.push(obj)
      })
      this.tableList = list
      
      if (this.tableList.length === 0) {
        this.$message({
          type: 'warning',
          message: '未勾选访视表单！',
        })
        return
      }
      this.disabledSubmit = true
      let sort = 0
      
      if (this.tableData.length > 0) {
        sort = this.tableData[this.tableData.length - 1].sort || 0
      }
      const data = {
        databaseId: this.edcDataBaseId,
        databaseVersion: this.dataBaseVersion,
        tableList: this.tableList,
        projectId: this.edcBuildProjectId,
        environment: this.environment,
        sort
      }
      this.visitTableCreate({ data }).then(resp => {
        if (resp.code === 200) {
          this.disabledSubmit = false
          this.$message({
            type: 'success',
            message: '添加成功',
          })
          this.$refs.multipleTableabc.clearSelection()
          this.$emit('addVisitOk')
        } else {
          this.disabledSubmit = false
        }
      })
    },

    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val
    },

    onClose() {
      this.$refs.multipleTableabc.clearSelection()
      this.$emit('addVisitCancal')
    },
  },
}
</script>
<style lang="scss" scoped>
.interview {
  color: #753cca;
  font-weight: bolder;
  text-align: right;
  font-size: 16px;
  padding-bottom: 10px;
  width: 130px;
}
</style>
